<template>
  <div class="p-5">
    <p>{{isMove}}</p>
    <p>{{angle}}</p>
    <p>{{relaAngle}}</p>
    <div ref="box" class="box" 
        @mousedown="mousedown" @touchstart="mousedown"
        :style="{transform: 'rotate(' + relaAngle + 'deg)'}">
        <div class="dot dot1">1</div>
        <div class="dot dot2">2</div>
        <div class="dot dot3">3</div>
        <div class="dot dot4">4</div>
    </div>
    <navi-btns></navi-btns>
    <zoom style="position: absolute;top: 300px;left: 10px;"></zoom>
  </div>
</template>
<script>
import NaviBtns from '~/components/navibtns'
import Zoom from '~/components/navibtns/Zoom'
export default {
  title: "测试",
  components: {
    NaviBtns,
    Zoom
  },

  

// $(document).on('mousemove',function(e){
// 	var x = e.pageX;
// 	var y = e.pageY;
// 	var origin = {x:200,y:100} // 当前元素的中心点

// 	// 计算出当前鼠标相对于元素中心点的坐标
// 	x = x - origin.x;
// 	y = origin.y - y;

// 	atan2(y,x);
// });
// 	function atan2(y,x){
// 		var degree = Math.atan2(y,x) / (Math.PI / 180);
// 		degree = -degree; 
// 		$('.line').css('transform','rotate('+degree+'deg)');
// 	}		
  methods: {
    getDragAngle(event) {
        event.stopPropagation
        // const element = this.$refs.box;
        // const x = event.clientX || event.targetTouches[0].clientX
        // const y = event.clientY || event.targetTouches[0].clientY
        // const angle = Math.atan2(this.centerY - y, this.centerX - x);
        // return angle - this.angle;
        const x = (event.clientX || event.targetTouches[0].clientX) - this.centerX
        const y = this.centerY - (event.clientY || event.targetTouches[0].clientY)
        const degree = Math.atan2(y,x) / (Math.PI / 180);
        // console.log('angle->', angle);
        this.relaAngle = -degree
    },
    mousedown(event) {
        // this.angle = this.getDragAngle(event);
        console.log(this.angle);
        this.isMove = true;
    },
    mousemove(event) {
        if (this.isMove) {
          this.getDragAngle(event)
            // this.relaAngle = this.getDragAngle(event)
            // console.log('isMove', this.relaAngle);
        }
    },
    mouseup(event) {
        if (this.isMove) {
      　　  this.isMove = false;
      // 　　  this.angle = this.getDragAngle(event);
  　　  }
    }
  },
}
</script>
<style lang="scss">
</style>